<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<nav-bar myname="首页" :myleft="false"></nav-bar>
			<nav-bar myname="我的" :myleft="true"></nav-bar>
		</div>
		<script>
			Vue.component('navBar',
			{
				props:{
					myname:{
						type:string,
						default:''
					},
					myleft:{
						type.Boolean,
						default:true
					}
				}
				// props:["myname","myleft"],
				template:`<div style="background:red">
				<button @click="hua" >列表</button>
				{{myname}}
				<button @click="huaaa" v-show="myleft">返回</button>
				<text-child></text-child>
				<navChild></navChild>
				</div>`,
				methods:{
					hua(){
						console.log("点击了一个返回按钮",this.myname)
					},
					huaaa(){
						console.log("点击一个逻辑返回")
					}
				},
					data(){
					return{
						
					}
				},
				watch:{
					
				},
			})
			var xm=new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				},
				components:{
					
				}
			})
		</script>
	</body>
</html>